<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <link rel="stylesheet" href="./CSS/login.css">
    <style>
        .zhubanfang {

            position: relative;
            width: 81px;
            height: 34px;

            text-align: center;
            line-height: 34px;

            color: white;
            font-weight: bold;
            cursor: pointer;
            border-radius: 30px;
            background-color: #82c4ee;
            top: 30px;
            left: 30px;

        }
    </style>
</head>

<body>
<div class="box">
    <div class="zhubanfang">主办方登录</div>

    <div class="LoginBox">
        <div class="LoginLeft">
            <div class="LeftBox">
                <div class="BoxTitle">
                    <P style="font-size: 16px;font-weight: 900;margin-bottom: 10px;">曾经的约定</P>
                    <p style="font-size: 20px;font-weight: 900;margin-bottom: 10px;">数字校园登录</p>

                    <span style="color: red;" id="errMsg"></span>
                </div>

                <div class="inputBox1">
                    <form action="#" class="form">
                        <div class="inputBox">
                            <p style="color: rgb(73, 161, 238);">用户名</p>
                            <div class="inputP">
                                <input type="text" class="userInput" name="username">
                            </div>
                        </div>
                        <div class="inputBox">
                            <p style="color: rgb(73, 161, 238);">密码</p>
                            <div class="inputP">
                                <input type="password" class="userInput userPassword" name="password">
                            </div>
                        </div>
                        <div style="width: 100%;height: 12px; display: flex;align-items: center;">
                            <input type="checkbox" class="RemeberPassword"> <span
                                style="margin-left: 5px;">记住密码</span>
                        </div>

                        <input type="submit" value="登录" class="inputSubmit">
                        <input type="submit" value="注册" class="inputregister">
                    </form>

                </div>

            </div>
        </div>
        <div class="LoginImage">

        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
    // 获取屏幕宽度 
    var font = document.body.offsetWidth / 200 + "px";
    if (document.body.offsetWidth <= 1312) {
        font = 1312 / 200 + 'px'
    }
    document.querySelector("html").style.fontSize = font;

    // 

    var from = document.querySelector(".form")
    var userInput = document.querySelector(".userInput")
    var userPassword = document.querySelector(".userPassword")
    var inputBoxList = document.querySelectorAll(".inputBox")
    var RemeberPassword = document.querySelector(".RemeberPassword");

    console.log(RemeberPassword.checked);

    userInput.addEventListener("focus", () => {
        inputBoxList[0].style.boxShadow = "1px 26px 19px -20px skyblue"
    })
    userInput.addEventListener("blur", () => {
        inputBoxList[0].style.boxShadow = "0px 0px 0px -0px skyblue"
    })

    userPassword.addEventListener("focus", () => {
        inputBoxList[1].style.boxShadow = "1px 26px 19px -20px skyblue"
    })
    userPassword.addEventListener("blur", () => {
        inputBoxList[1].style.boxShadow = "0px 0px 0px -0px skyblue"
    })
    from.addEventListener("submit", (event) => {
        event.preventDefault()

    })

    var inputregister = document.querySelector(".inputregister")
    inputregister.addEventListener("click", function (event) {
        event.preventDefault();
        location.href = "./register.html";
    })
    var inputSubmit = document.querySelector(".inputSubmit")
    var errMsg = document.querySelector("#errMsg")
    inputSubmit.addEventListener("click", function () {
        var username = userInput.value;
        var password = userPassword.value;

        console.log(errMsg)
        axios({
            method: 'post',
            url: '/Indenture/login',
            data: {
                username: username,
                password: password
            }
        }).then((res) => {

            if (res.data.status == 0) {
                errMsg.innerHTML = res.data.Msg
            } else {

                sessionStorage.setItem("user", JSON.stringify(res.data.userMsg))
                // console.log("JSON.stringify(res.data.userMsg):"+JSON.stringify(res.data.userMsg))
                // console.log(JSON.parse(sessionStorage.getItem("user")))
                location.href = "/Indenture/index.html"
            }
        })

    })

    const zhubanfang = document.querySelector(".zhubanfang");
    zhubanfang.addEventListener("click", function () {
        location.href = "./loginCompany.html"
    })

</script>
</body>

</html>